﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Draggable, Draggable Plugin, jqxDragDrop" />
    <meta name="description" content="This page represents the help documentation of the jqxDragDrop plugin." />
    <title>jqxDragDrop API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
   <div id="properties">
        <h2 class="documentation-top-header">Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>appendTo</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'parent'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets where will be appended the draggable's feedback.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>appendTo</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ appendTo: 'body' });</code></pre>
                        <p>
                            Get the <code>appendTo</code> property.
                        </p>
                        <pre><code>var appendTo = $('#jqxDragDrop').jqxDragDrop('appendTo');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tVEVA/">appendTo is set to 'body' </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the dragging is disabled.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({disabled:true});</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxDragDrop').jqxDragDrop('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pS2S2/">disabled is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>distance</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the distance required for the cursor to pass befor the drag begins.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>distance</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({distance:10});</code></pre>
                        <p>
                            Get the <code>distance</code> property.
                        </p>
                        <pre><code>var distance = $('#jqxDragDrop').jqxDragDrop('distance');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MRne3/">distance is set to 10</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>data</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This property can be used for setting some kind of information transferred with the draggable.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>data</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({data: {foo: 'foo', bar: 'bar'}});</code></pre>
                        <p>
                            Get the <code>data</code> property.
                        </p>
                        <pre><code>var data = $('#jqxDragDrop').jqxDragDrop('data');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/snXa5/">data is set to {foo: 'foo', bar: 'bar'}</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>dropAction</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'default'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the draggable element will change its position ('default') or not ('none') when the element is dropped.

                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dropAction</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ dropAction: 'none' });</code></pre>
                        <p>
                            Get the <code>dropAction</code> property.
                        </p>
                        <pre><code>var dropAction = $('#jqxDragDrop').jqxDragDrop('dropAction');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jjTeE/">dropAction is set to 'none'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>dropTarget</span>
                </td>
                <td>
                    <span>String/Object</span>
                </td>
                <td>
                    null.
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the drop target.
                            The drop target is a DOM element(s) for which jqxDragDrop triggers events when the user drags or drops
                            the draggable element over that element(s). The drop target can be specified by using a selector or an
                            object. If the user drags the draggable element over the drop target, the onDropTargetEnter event will be raised.
                            If the draggable element is inside the drop target and the user drags the element outside the drop target, the onDropTargetLeave event is raised.
                            When the user drops the draggable element over a drop target, the onTargetDrop event is raised.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dropTarget</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop( { dropTarget: $(document.body) } );</code></pre>
                        <p>
                            Specifying the drop target with CSS selector:
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop( { dropTarget: $('.dropTarget') } );</code></pre>
                        <p>
                            The above code will make all elements which use the "dropTarget" CSS class to be drop targets for the draggable element.
                        </p>
                        <p>
                            Get the <code>dropTarget</code> property.
                        </p>
                        <pre><code>var dropTarget = $('#jqxDragDrop').jqxDragDrop('dropTarget');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GJLVt/">dropTarget is set to ".dropTarget"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>dragZIndex</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    99999
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets element's z-index when it's dragging.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dragZIndex</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ dragZIndex: 6 });</code></pre>
                        <p>
                            Get the <code>dragZIndex</code> property.
                        </p>
                        <pre><code>var dragZIndex = $('#jqxDragDrop').jqxDragDrop('dragZIndex');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zsULg/">dragZIndex is set to 6 </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>feedback</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'clone'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the feedback. The feedback is the object which is actually dragged by the user.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'clone'-the user drags a clone of the original element</code></pre>
                        <pre><code>'original'-the user drags the original element</code></pre>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>feedback</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({feedback:'original'});</code></pre>
                        <p>
                            Get the <code>feedback</code> property.
                        </p>
                        <pre><code>var feedback = $('#jqxDragDrop').jqxDragDrop('feedback');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L3xk6/">feedback is set to 'original'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>initFeedback</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when the feedback is created.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>initFeedback</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ initFeedback: function(feedback) { feedback.width(300); } });</code></pre>
                        <p>
                            Get the <code>initFeedback</code> property.
                        </p>
                        <pre><code>var onDropTargetLeave = $('#jqxDragDrop').jqxDragDrop('initFeedback');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FS4m2/">initFeedback is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>opacity</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0.6
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets draggable object's opacity when it's dragging.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>opacity</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({opacity:0.3});</code></pre>
                        <p>
                            Get the <code>opacity</code> property.
                        </p>
                        <pre><code>var opacity = $('#jqxDragDrop').jqxDragDrop('opacity');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Z3jH7/">opacity is set to 0.3</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>onDragEnd</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when the drag ends.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onDragEnd</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onDragEnd: function() { alert('Bar'); } });</code></pre>
                        <p>
                            Get the <code>onDragEnd</code> property.
                        </p>
                        <pre><code>var appendTo = $('#jqxDragDrop').jqxDragDrop('onDragEnd');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/edebR/">onDragEnd is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>onDrag</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing while dragging.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onDrag</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onDrag: function(data, pos) { alert(pos.x); } });</code></pre>
                        <p>
                            Get the <code>onDrag</code> property.
                        </p>
                        <pre><code>var onDrag = $('#jqxDragDrop').jqxDragDrop('onDrag');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qfadc/">onDrag is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>onDragStart</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when drag start.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onDragStart</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onDragStart: function(pos) { alert(pos.x); } });</code></pre>
                        <p>
                            Get the <code>onDragStart</code> property.
                        </p>
                        <pre><code>var onDragStart = $('#jqxDragDrop').jqxDragDrop('onDragStart');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qfadc/">onDragStart is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>onTargetDrop</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when drag ends over the drop target.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onTargetDrop</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onTargetDrop: function(data) { alert('Bar'); } });</code></pre>
                        <p>
                            Get the <code>onTargetDrop</code> property.
                        </p>
                        <pre><code>var onTargetDrop = $('#jqxDragDrop').jqxDragDrop('onTargetDrop');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k9yCa/">onTargetDrop is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>onDropTargetEnter</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when the draggable enter any of it's drop targets.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onDropTargetEnter</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onDropTargetEnter: function() { alert('Bar'); } });</code></pre>
                        <p>
                            Get the <code>onDropTargetEnter</code> property.
                        </p>
                        <pre><code>var onDropTargetEnter = $('#jqxDragDrop').jqxDragDrop('onDropTargetEnter');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pVNRu/">onDropTargetEnter is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>onDropTargetLeave</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback which is executing when the draggable leave any of it's drop targets.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>onDropTargetLeave</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({ onDropTargetLeave: function(data) { alert(data); } });</code></pre>
                        <p>
                            Get the <code>onDropTargetLeave</code> property.
                        </p>
                        <pre><code>var onDropTargetLeave = $('#jqxDragDrop').jqxDragDrop('onDropTargetLeave');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u2bXb/">onDropTargetLeave is set to custom function </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>restricter</span>
                </td>
                <td>
                    <span>Object/String</span>
                </td>
                <td>
                    'document'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets dragdrop's restrict area.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'body'</code></pre>
                        <pre><code>'document'</code></pre>
                        <pre><code>'parent'</code></pre>
                        <pre><code>{left,top,width,height}</code></pre>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>restricter</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({restricter:'body'});</code></pre>
                        <p>
                            Get the <code>restricter</code> property.
                        </p>
                        <pre><code>var restricter = $('#jqxDragDrop').jqxDragDrop('restricter');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9BwjH/">restricter is set to 'parent'</a>
                        </div>
                    </div>
                </td>
            </tr>








            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>revert</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the draggable element will be reverted to it's original position after drop.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>revert</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({revert:true});</code></pre>
                        <p>
                            Get the <code>revert</code> property.
                        </p>
                        <pre><code>var revert = $('#jqxDragDrop').jqxDragDrop('revert');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hpc9q/">revert is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>revertDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the duration for which the draggable object will be reverted.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>revertDuration</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({revertDuration:300});</code></pre>
                        <p>
                            Get the <code>revertDuration</code> property.
                        </p>
                        <pre><code>var revertDuration = $('#jqxDragDrop').jqxDragDrop('revertDuration');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bk4tP/">revertDuration is set to 300</a>
                        </div>
                    </div>
                </td>
            </tr>




            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>tolerance</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'intersect'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the draggable item is over it's drop target when it's intersecting it or when it's fully inside it's target.
                        </p>
                        The onDropTargetEnter event will be triggered depending on the value of this property. The 'fit' tolerance means that the draggable item is fully inside
                        the target, where the 'intersect' means that the item is intersecting with the target.
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>tolerance</code> property.
                        </p>
                        <pre><code>$('#jqxDragDrop').jqxDragDrop({tolerance:'fit'});</code></pre>
                        <p>
                            Get the <code>tolerance</code> property.
                        </p>
                        <pre><code>var tolerance = $('#jqxDragDrop').jqxDragDrop('tolerance');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j9a4e/">tolerance is set to 'fit'</a>
                        </div>
                    </div>
                </td>
            </tr>



            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>dragStart</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the item is dragged for first time.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>dragStart</code> event by type: jqxDragDrop.
                        </p>
                        <pre><code>$('#jqxDragDrop').bind('dragStart', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wayX2/">Bind to the dragStart event by type: jqxDragDrop.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>dragEnd</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the item is dropped.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>dragEnd</code> event by type: jqxDragDrop.
                        </p>
                        <pre><code>$('#jqxDragDrop').bind('dragEnd', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2e9Jd/">Bind to the dragEnd event by type: jqxDragDrop.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>dragging</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered while the item is dragging.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>dragging</code> event by type: jqxDragDrop.
                        </p>
                        <pre><code>$('#jqxDragDrop').bind('dragging', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7VuJp/">Bind to the dragging event by type: jqxDragDrop.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>dropTargetEnter</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the draggable item is over it's drop target for first time.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>dropTargetEnter</code> event by type: jqxDragDrop.
                        </p>
                        <pre><code>$('#jqxDragDrop').bind('dropTargetEnter', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qBQRj/">Bind to the dropTargetEnter event by type: jqxDragDrop.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>dropTargetLeave</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the draggable item leave it's drop target.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>dropTargetLeave</code> event by type: jqxDragDrop.
                        </p>
                        <pre><code>$('#jqxDragDrop').bind('dropTargetLeave', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/AXKqx/">Bind to the dropTargetLeave event by type: jqxDragDrop.</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
